<template>
  <div id="relationship" style="width: 100%; height: 100%"></div>
</template>

<script>
import RelationData from "../../assets/json/dataAll.json";
import * as echarts from "echarts";
export default {
  data() {
    return {
      RelationData,
    };
  },
  methods: {
    relation() {
      let content = RelationData["nodes"];
      let link = RelationData["edges"];
      // console.log(content);
      this.draw_relation(content, link);
    },
    draw_relation(content, link) {
      let myChart = echarts.init(document.getElementById("relationship"));

      // 颜色列表
      const colors = [
        "#899790",
        "#60715f",
        "#b6976e",
        "#a7a18c",
        "#d6bba2",
        "#878876",
        "#a87c6c",
      ];

      let option = {
        // title: {
        // 	text: '高频知识点词云图',
        // 	left: 'center'
        // },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.dataType === "node") {
              // Customize tooltip content for nodes if needed
              return params.data.name;
            } else if (params.dataType === "edge") {
              // Customize tooltip content for links based on the 'type' property
              return params.data.type;
            }
          },
        },
        legend: [
          {
            // selectedMode: 'single',
            data: content.map(function (a, index) {
              return {
                name: a.category,
                // 为每个类别分配颜色
                icon: "circle",
                textStyle: { color: colors[index % colors.length] },
              };
            }),
          },
        ],
        animationDuration: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            // name: 'Les Miserables',
            type: "graph",
            // layout: 'circular',
            layout: "force",
            // data:content,
            data: content.map((node) => {
              return {
                ...node,
                // 为每个节点随机分配颜色
                itemStyle: {
                  color: colors[node.category % colors.length],
                },
              };
            }),
            links: link,
            categories: content.map(function (a) {
              return a.category;
            }),
            roam: true,
            label: {
              position: "right",
              formatter: "{b}",
            },
            lineStyle: {
              // color: 'source',
              curveness: 0.3,
              color: "#43341B",
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.relation();
  },
};
</script>

<style></style>